import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import utils from '../utils/utils'
import api from '../api'

const routes: RouteRecordRaw[] = [
    {
        name: 'HomeView',
        path: '/',
        redirect: 'login',
        component: () => import('../views/HomeView.vue'),
        children: [
            {
                name: 'WelcomeAd',
                path: '/welcome',
                meta: { title: '首页' }, // 路由元信息
                component: () => import('../views/ChlidPage/WelcomeAd.vue')
            },
            // {
            //     name: 'ApproveAd',
            //     path: '/approve',
            //     meta: { title: '审批管理' }, // 路由元信息
            //     component: () => import('../views/ChlidPage/ApproveAd.vue')
            // },
            // {
            //     name: 'DeptAd',
            //     path: '/dept',
            //     meta: { title: '部门管理' }, // 路由元信息
            //     component: () => import('../views/ChlidPage/DeptAd.vue')
            // },
            // {
            //     name: 'TogetherAd',
            //     path: '/together',
            //     meta: { title: '人员打卡聚合' }, // 路由元信息
            //     component: () => import('../views/ChlidPage/TogetherAd.vue')
            // },
            // {
            //     name: 'TrackAd',
            //     path: '/track',
            //     meta: { title: '轨迹回放' }, // 路由元信息
            //     component: () => import('../views/ChlidPage/TrackAd.vue')
            // },
            // {
            //     name: 'UploadrAd',
            //     path: '/upload',
            //     meta: { title: '上传图片' }, // 路由元信息
            //     component: () => import('../views/ChlidPage/UploadrAd.vue')
            // },
            // {
            //     name: 'EchartAd',
            //     path: '/echart',
            //     meta: { title: '图表管理' }, // 路由元信息
            //     component: () => import('../views/ChlidPage/EchartAd.vue')
            // },
            // {
            //     name: 'LeaveAd',
            //     path: '/leave',
            //     meta: { title: '待审批管理' }, // 路由元信息
            //     component: () => import('../views/ChlidPage/LeaveAd.vue')
            // },
            // {
            //     name: 'MenuAd',
            //     path: '/menu',
            //     meta: { title: '菜单管理' }, // 路由元信息
            //     component: () => import('../views/ChlidPage/MenuAd.vue')
            // },
            // {
            //     name: 'RoleAd',
            //     path: '/role',
            //     meta: { title: '角色管理' }, // 路由元信息
            //     component: () => import('../views/ChlidPage/RoleAd.vue')
            // },
            // {
            //     name: 'UserAd',
            //     path: '/user',
            //     meta: { title: '用户管理' }, // 路由元信息
            //     component: () => import('../views/ChlidPage/UserAd.vue')
            // }
        ]
    },
    {
        name: 'LoginView',
        path: '/login',
        meta: { title: '登陆' }, // 路由元信息
        component: () => import('../views/LoginView.vue'),
    },
    {
        name: '404',
        path: '/404',
        meta: { title: 'Not Found' }, // 路由元信息
        component: () => import('../views/404View.vue'),
    }
]

//动态路由
async function loadAsyncRoutes() {
    //判断是否登录
    const userInfo = window.sessionStorage.getItem('userInfo') || "{}"
    const { token } = JSON.parse(userInfo)
    if (token) {
        //调用权限接口
        const res = await api.getPermissionListMenuListApi()
        const { menuList } = res.data
        // 调用动态生成路由函数
        const routerList = utils.generatorRouter(menuList)
        //获取views文件夹下面的ChlidPage下面的所有页面
        // const modules = import.meta.glob('../views/ChlidPage/*.vue')
        routerList.forEach((item: any) => {
            // let url = `../views/ChlidPage/${item.component}.vue`
            // route.component = modules[url]
            router.addRoute('HomeView', item)//向路由器添加新路由   第一个参数是父路由的name
        });
    }

}

//创建路由实例
const router = createRouter({
    routes,
    history: createWebHistory(),
})

//前置导航守卫
router.beforeEach(async (to, _from, next) => {
    //判断是否登录
    const userInfo = window.sessionStorage.getItem('userInfo') || "{}"
    const { token } = JSON.parse(userInfo)
    if (to.name) {
        // 动态修改网页标题
        document.title = to.meta.title as string
        if (!token && to.name !== 'LoginView') {
            next('/login')
        } else {
            next()
        }
    } else {
        await loadAsyncRoutes()//动态路由
        //获取所有路由对象并过滤出当前要跳转到路由
        let curRoute = router.getRoutes().filter((item: any) => item.path === to.path)
        console.log(curRoute);
        if (curRoute?.length) {//?.可选链操作符   相当于curRoute && curRoute.length
            //终止当前导航 跳转到新的导航    防止跳转时出现白屏
            next({ ...to, replace: true }) //replace: true 表示在浏览器历史记录中用新的路由替换当前的路由，而不是添加一个新的历史记录条目
        } else {
            next('/404')
        }
    }
})

//重置路由
export function resetRoouter() {
    //获取所有路由对象
    let routersList = router.getRoutes()
    //遍历删除路由
    routersList.forEach((item: any) => {
        //简单写法
        // if (item.name !== 'HomeView' && item.name !== 'LoginView' && item.name !== '404') {
        //     router.removeRoute(item.name)
        // }

        //优雅写法  includes()检查数组中是否包含特定的元素。它返回一个布尔值
        if (!['HomeView', 'LoginView', '404'].includes(item.name)) {
            router.removeRoute(item.name)//删除路由
        }
    })
}

export default router